<template>
	<view style="background-image:url('../../static/background.png'); " class="biaoTu">
		<view>
			<view class="container">
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
				<view class="meteor"></view>
		 	<view class="meteor"></view>


			</view>
			<view >
				<image class="portrait" :src="info.url"></image>
			</view>
			<view :animation="animation">
				<image src="../../static/indexTab/total.png"
					style="width: 130rpx;height:130rpx;position:relative;left: 0%;top: 470rpx;border-radius: 63rpx;"
					@click="toEpidemicBigData"></image>
				<view class="ceshi" style="position:relative;left: -5%;top: 470rpx;" @click="toEpidemicBigData">
					<text>疫情大数据</text>
				</view>
				<!-- <uni-tag  style="" circle='true' type="primary" text="疫情大数据"
					></uni-tag> -->
			</view>
			<view :animation="animation">
				<image src="../../static/indexTab/travelPolicy.png"
					style="width: 130rpx;height:130rpx;position:relative;left: 37%;top: 430rpx;border-radius: 63rpx;"
					@click="toTravelPolicy"></image>
				<view class="ceshi" style="position:relative;left: 32%;top: 430rpx;" @click="toTravelPolicy">
					<text>疫情预案</text>
				</view>
				<!-- <uni-tag style="position:relative;left: 40%;top: 290rpx" circle='true' type='primary' text="预案生成"
					@click="toTravelPolicy"></uni-tag> -->
			</view>
			<view :animation="animation">
				<image src="../../static/indexTab/person.png"
					style="width: 130rpx;height:130rpx;position:relative;left: 75%;top: 50rpx;border-radius: 63rpx;"
					@click="toPersonalCenter"></image>
				<view class="ceshi" style="position:relative;left: 70%;top: 50rpx;" @click="toPersonalCenter">
					<text>个人中心</text>
				</view>
				<!-- <uni-tag style="position:relatsive;left: 40%;top: 360rpx;" lang="zh_CN" type='primary' text="个人中心"
					@tap="toPersonalCenter"></uni-tag> -->
			</view>
		</view>

		
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex';

	export default {
		onLoad() {
			this.setFloatAnimation("animation")
			this.info = this.$store.getters.getUserInfo
		},


		data() {
			return {
				info: {},
				animation: null
			}
		},

		methods: {
		
			...mapGetters(['userInfo']),
			...mapMutations(['login']),
		
			toPersonalCenter() {
				uni.navigateTo({
					url: "../personalCenter/personalCenter"
				})
			},
			toEpidemicBigData() {
				uni.navigateTo({
					url: "../epidemicBigData/epidemicBigData"
				})
			},
			toTravelPolicy() {
				uni.navigateTo({
					url: "../travelPolicy/travelPolicy"
				})
			},
			setFloatAnimation(field, scope = 20, time = 2000) {
				let singleTime = time / 2 //单个方向的运动时间
				let animation = uni.createAnimation()
				const interval = () => {
					animation.translateY(-scope).step({
						duration: singleTime
					})
					this[field] = animation.export()
					setTimeout(() => {
						animation.translateY(0).step({
							duration: singleTime
						})
						this[field] = animation.export()
					}, singleTime + 100)
					return interval // 自我调用一次
				}
				setInterval(interval(), time + 200)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {

		margin-left: -280rpx;
		margin-top: -170rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		margin-left: -280rpx;
		border-radius: 80rpx;
		margin-top: 50rpx;
		font-size: 35rpx;
	}

	.uni-ec-canvas {
		width: 750rpx;
		height: 750rpx;
		display: block;
	}

	.tu {
		/* border-color: #5500ff; */
		/* border-width: 50rpx; */
		display: block; //盒子模型
		/*flex-direction: row; */
		/*height: 100rpx;*/
		width: 750rpx;
		position: relative;
		left: 125rpx;
		top: 100rpx;
		color: #ffffff;
		background-color: #05132d;
	}

	.tu text {

		//盒子模型
		/*border: #4CD964; */

		color: #0092D5;

		margin: 30rpx;
		position: relative;
		/*top: 220rpx;*/
		left: 20rpx;
		white-space: pre-wrap;
	}

	.tu_btn {
		width: 400rpx;
		height: 150rpx;
		text-align: center;
		line-height: 34px;
		border-radius: 34px;
		background-color: #05132d;
		font-size: 20px;
		font-weight: 700;
	}

	

	.biaoTu {

		width: 85%;
		padding: 87rpx;
		background-size: 100%;
		height: 1000rpx;

	}

	.banner_box {
		display: flex;
		width: 100%;
		padding: 20rpx;
		justify-content: center; //垂直居中
		align-items: center; //水平居中
		border-radius: 5px; //圆角

		.swiper {
			width: 90%;
			height: 400rpx;

			.banner {
				width: 90%;
				height: 400rpx;
			}
		}
	}

	.coure_box {
		display: flex;
		position: absolute;
		top: 700rpx;
		left: 250rpx;
		width: 100%;
		color: #ffffff;
		justify-content: center;
		align-items: center;
		box-sizing: border-box; //改盒子不可以超过父盒大小
		overflow: hidden;
		padding: 0 15px;
		justify-content: space-between;
		align-content: space-between;
		flex-wrap: wrap;

		.coure_box_T {
			font-size: 20px;
			font-weight: 700;
		}
	}





	.container {
		position: relative;
		width: 100%;
		height: 100%;
		-webkit-transform: rotate(45deg);
		transform: rotateZ(45deg);
		-webkit-animation: sky 200000ms linear infinite;
		animation: sky 200000ms linear infinite;
	}

	.meteor {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 2px;
		background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
		border-radius: 999px;
		-webkit-filter: drop-shadow(0 0 6px #699bff);
		filter: drop-shadow(0 0 6px #699bff);
		-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
		animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
	}

	.meteor::before,
	.meteor::after {
		content: '';
		position: absolute;
		top: calc(50% - 1px);
		right: 0;
		height: 2px;
		background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
		-webkit-transform: translateX(50%) rotateZ(45deg);
		transform: translateX(50%) rotateZ(45deg);
		border-radius: 100%;
		-webkit-animation: shining 3000ms ease-in-out infinite;
		animation: shining 3000ms ease-in-out infinite;
	}

	.meteor::after {
		-webkit-transform: translateX(50%) rotateZ(-45deg);
		transform: translateX(50%) rotateZ(-45deg);
	}

	/* 1 */
	.meteor:nth-child(1) {
		top: calc(50% - 185px);
		left: calc(50% - 150px);
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	.meteor:nth-child(1)::before,
	.meteor:nth-child(1)::after,
	.meteor:nth-child(1)::after {
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	/* 2 */
	.meteor:nth-child(2) {
		top: calc(50% - 50px);
		left: calc(50% - 180px);
		-webkit-animation-delay: 9288ms;
		animation-delay: 9288ms;
	}

	.meteor:nth-child(2)::before,
	.meteor:nth-child(2)::after,
	.meteor:nth-child(2)::after {
		-webkit-animation-delay: 9288ms;
		animation-delay: 9288ms;
	}

	.meteor:nth-child(3) {
		top: calc(50% - 145px);
		left: calc(50% - 135px);
		-webkit-animation-delay: 8600ms;
		animation-delay: 8600ms;
	}

	.meteor:nth-child(3)::before,
	.meteor:nth-child(3)::after,
	.meteor:nth-child(3)::after {
		-webkit-animation-delay: 8600ms;
		animation-delay: 8600ms;
	}

	.meteor:nth-child(4) {
		top: calc(50% - 78px);
		left: calc(50% - 155px);
		-webkit-animation-delay: 3288ms;
		animation-delay: 3288ms;
	}

	.meteor:nth-child(4)::before,
	.meteor:nth-child(4)::after,
	.meteor:nth-child(4)::after {
		-webkit-animation-delay: 3288ms;
		animation-delay: 3288ms;
	}

	.meteor:nth-child(5) {
		top: calc(50% - 183px);
		left: calc(50% - 8px);
		-webkit-animation-delay: 5588ms;
		animation-delay: 5588ms;
	}

	.meteor:nth-child(5)::before,
	.meteor:nth-child(5)::after,
	.meteor:nth-child(5)::after {
		-webkit-animation-delay: 5588ms;
		animation-delay: 5588ms;
	}

	.meteor:nth-child(6) {
		top: calc(50% - 30px);
		left: calc(50% - 195px);
		-webkit-animation-delay: 9388ms;
		animation-delay: 9388ms;
	}

	.meteor:nth-child(6)::before,
	.meteor:nth-child(6)::after,
	.meteor:nth-child(6)::after {
		-webkit-animation-delay: 9388ms;
		animation-delay: 9388ms;
	}

	.meteor:nth-child(7) {
		top: calc(50% - 95px);
		left: calc(50% - 70px);
		-webkit-animation-delay: 2588ms;
		animation-delay: 2588ms;
	}

	.meteor:nth-child(7)::before,
	.meteor:nth-child(7)::after,
	.meteor:nth-child(7)::after {
		-webkit-animation-delay: 2588ms;
		animation-delay: 2588ms;
	}

	.meteor:nth-child(8) {
		top: calc(50% - 60px);
		left: calc(50% - 70px);
		-webkit-animation-delay: 5288ms;
		animation-delay: 5288ms;
	}

	.meteor:nth-child(8)::before,
	.meteor:nth-child(8)::after,
	.meteor:nth-child(8)::after {
		-webkit-animation-delay: 5288ms;
		animation-delay: 5288ms;
	}

	.meteor:nth-child(9) {
		top: calc(50% - 75px);
		left: calc(50% - 250px);
		-webkit-animation-delay: 888ms;
		animation-delay: 888ms;
	}

	.meteor:nth-child(9)::before,
	.meteor:nth-child(9)::after,
	.meteor:nth-child(9)::after {
		-webkit-animation-delay: 888ms;
		animation-delay: 888ms;
	}

	.meteor:nth-child(9) {
		top: calc(50% - 76px);
		left: calc(50% - 240px);
		-webkit-animation-delay: 2388ms;
		animation-delay: 2388ms;
	}

	.meteor:nth-child(9)::before,
	.meteor:nth-child(9)::after,
	.meteor:nth-child(9)::after {
		-webkit-animation-delay: 2388ms;
		animation-delay: 2388ms;
	}

	.meteor:nth-child(10) {
		top: calc(50% - 85px);
		left: calc(50% - 6px);
		-webkit-animation-delay: 3588ms;
		animation-delay: 3588ms;
	}

	.meteor:nth-child(10)::before,
	.meteor:nth-child(10)::after,
	.meteor:nth-child(10)::after {
		-webkit-animation-delay: 3588ms;
		animation-delay: 3588ms;
	}

	.meteor:nth-child(11) {
		top: calc(50% - 135px);
		left: calc(50% - 260px);
		-webkit-animation-delay: 2888ms;
		animation-delay: 2888ms;
	}

	.meteor:nth-child(11)::before,
	.meteor:nth-child(11)::after,
	.meteor:nth-child(11)::after {
		-webkit-animation-delay: 2888ms;
		animation-delay: 2888ms;
	}

	.meteor:nth-child(12) {
		top: calc(50% - 15px);
		left: calc(50% - 8px);
		-webkit-animation-delay: 388ms;
		animation-delay: 388ms;
	}

	.meteor:nth-child(12)::before,
	.meteor:nth-child(12)::after,
	.meteor:nth-child(12)::after {
		-webkit-animation-delay: 388ms;
		animation-delay: 388ms;
	}

	.meteor:nth-child(13) {
		top: calc(50% - 155px);
		left: calc(50% - 50px);
		-webkit-animation-delay: 7288ms;
		animation-delay: 7288ms;
	}

	.meteor:nth-child(13)::before,
	.meteor:nth-child(13)::after,
	.meteor:nth-child(13)::after {
		-webkit-animation-delay: 7288ms;
		animation-delay: 7288ms;
	}

	.meteor:nth-child(14) {
		top: calc(50% - 28px);
		left: calc(50% - 80px);
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	.meteor:nth-child(14)::before,
	.meteor:nth-child(14)::after,
	.meteor:nth-child(14)::after {
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	.meteor:nth-child(15) {
		top: calc(50% - 35px);
		left: calc(50% - 200px);
		-webkit-animation-delay: 7588ms;
		animation-delay: 7588ms;
	}

	.meteor:nth-child(15)::before,
	.meteor:nth-child(15)::after,
	.meteor:nth-child(15)::after {
		-webkit-animation-delay: 7588ms;
		animation-delay: 7588ms;
	}

	.meteor:nth-child(16) {
		top: calc(50% - 40px);
		left: calc(50% - 250px);
		-webkit-animation-delay: 1888ms;
		animation-delay: 1888ms;
	}

	.meteor:nth-child(16)::before,
	.meteor:nth-child(16)::after,
	.meteor:nth-child(16)::after {
		-webkit-animation-delay: 1888ms;
		animation-delay: 1888ms;
	}


	@-webkit-keyframes tail {
		0% {
			width: 0;
		}

		30% {
			width: 100px;
		}

		100% {
			width: 0;
		}
	}

	@keyframes tail {
		0% {
			width: 0;
		}

		30% {
			width: 100px;
		}

		100% {
			width: 0;
		}
	}

	@-webkit-keyframes shining {
		0% {
			width: 0;
		}

		50% {
			width: 30px;
		}

		1000% {
			width: 0;
		}
	}

	@keyframes shining {
		0% {
			width: 0;
		}

		50% {
			width: 30px;
		}

		1000% {
			width: 0;
		}
	}


	@keyframes shooting {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(300px);
			transform: translateX(300px);
		}
	}

	@-webkit-keyframes sky {
		0% {
			-webkit-transform: rotate(120deg);
			transform: rotate(120deg);
		}

		100% {
			-webkit-transform: rotate(130deg);
			transform: rotate(130deg);
		}
	}

	@keyframes sky {
		0% {
			-webkit-transform: rotate(120deg);
			transform: rotate(120deg);
		}

		100% {
			-webkit-transform: rotate(130deg);
			transform: rotate(130deg);
		}
	}

	@keyframes heart {
		0% {
			transform: scale(0.9);
		}

		60% {
			transform: scale(1);
		}

		80% {
			transform: scale(0.9);
		}

		95% {
			transform: scale(1);
		}

		100% {
			transform: scale(0.9);
		}
	}

	.ceshi {
		width: 200rpx;

		height: 70upx;
		text-align: center;
		line-height: 100upx;
		background: red;
		border-radius: 50upx;
		font-size: 30rpx;
		font-weight: 700;
		font-family: monospace;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to right, #FB0605, #FEA154);


	}
	.portrait{
		position:relative;left: 32%;top: 235rpx;
		width: 200rpx;
		height: 200rpx;
		border:5upx solid #fff;
		border-radius: 50%;
	}
</style>
